<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>部门管理</el-breadcrumb-item>
                <el-breadcrumb-item>部门管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-row>
            <el-col :span="12">
                <div>
                    <div>
                        <div style="margin-bottom: 15px;">
                            <el-row>
                                <el-col :span="2">
                                    <div>
                                        <el-button type="success" size="small" icon="el-icon-circle-plus-outline"
                                                   @click="dialogFormVisible = true">添加部门
                                        </el-button>
                                    </div>
                                </el-col>
                                <el-col :span="7" :offset="15">
                                    <div>

                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div></div>
                                </el-col>
                            </el-row>
                        </div>
                        <div>
                            <el-table
                                    :data="department"
                                    style="width: 100%;">
                                <el-table-column
                                        align="center"
                                        prop="departmentId"
                                        label="部门编号"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="department"
                                        label="部门名称">
                                </el-table-column>
                                <el-table-column label="操作" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                                icon="el-icon-delete"
                                                size="mini"
                                                @click="handleDelete(scope.$index, scope.row)">解散部门
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <div>
                        <div id="dept_chart_1" ref="dept_chart_1"
                             style="width: 100%;height: 300px;overflow: hidden;"></div>
                    </div>
                    <div class="zhedie">
                        <el-collapse v-model="activeName" accordion>
                            <el-collapse-item title="人事部" name="1">
                                <div>人事部是一个企业或者团体的人力资源和企业公共事务的管理部门 。现在为强化人的重要性，分离出人力资源部门。
                                    一般意义上人力资源部门应该是人事部的发展，但不能说人事部本身具有缺陷，只是一般意义上的解说歪曲了人事部的意义。人力资源的意义发展是其本身职能的发展而非部门名称的原因，因此人事部并没有过时之说。其本身职能的变化和发展应该具有时代意义。
                                </div>
                            </el-collapse-item>
                            <el-collapse-item title="财务部" name="2">
                                <div>1、负责公司日常财务核算，参与公司的经营管理。

                                    2、根据公司资金运作情况，bai合理调配资金，确保公司资金正常运转。

                                    3、搜集公司经营活动情况、资金动态、营业收入和费用开支的资料并进行分析、提出建议，定期向总经理报告。

                                    4、组织各部门编制收支计划，编制公司的月、季、年度营业计划和财务计划，定期对执行情况进行检查分析。

                                    5、严格财务管理，加强财务监督，督促财务人员严格执行各项财务制度和财经纪律。

                                    6、负责企业网上银行的安全与正常运营，负责下属各企业应上缴费用、下达与收缴工作。

                                    7、负责企业的资产管理、债权债务的管理工作，参与企业的各项投资管理。

                                    8、负责企业年度财务决算工作，审核、编制上级有关财务报表，并进行综合分析。

                                    9、负责企业的会计电算化管理工作，制定相关规章制度，保证会计信息真实、准确和完整。

                                    10、负责企业的纳税管理，运用税收政策，依法纳税，合理避税。

                                    11、负责财务会计凭证、账簿、报表等财务档案的分类、整理和移交档案。

                                    12、根据企业《财务总监管理办法》有关条款规定，对派往各股份公司的财务总监的工作进行管理和考核。

                                    13、完成领导交办的其他事项。

                                </div>
                            </el-collapse-item>
                            <el-collapse-item title="销售部" name="3">
                                <div>1　负责管理营销业务，规范对外活动。

                                    2　负责营销任务的分解、平衡、下达和推进。

                                    3　负责营销过程的控制，负责年度任务的有效完成。

                                    4　负责平衡和协调各产品事业部。

                                    5　负责新业务的布置和推广工作。

                                    6　监督合同的登记，领导合同的管理和审核。

                                    7　负责合同的信用评价。

                                    8　负责定期召开营销会议，检查和推进营销业务的进程。

                                    9　负责处理越区销售问题。

                                    10　管理和提升整个销售队伍。

                                    11　负责与物流的接口。

                                    12负责处理与销售部及分公司相应部门的关系。
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
            </el-col>
        </el-row>


        <el-dialog title="添加部门" :visible.sync="dialogFormVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="form">
                <el-form-item label="部门名称" label-width="80px">
                    <el-input v-model="form.departmentName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDepartment">确 定</el-button>
                <el-button @click="dialogFormVisible = false;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import MainTitle from "@/components/MainTitle";
    import {addDepartment, deleteDepartment, getAllDepartment} from "@/api/admin/department";

    export default {
        name: "Department",
        components: {
            MainTitle
        },
        mounted() {
            getAllDepartment().then(resp => {
                this.department = resp.data;
            });

            this.chart_1();
        },
        data() {
            return {
                activeName: '1',
                dialogFormVisible: false,
                form: {
                    departmentName: ""
                },
                department: [],
            }
        },
        methods: {
            handleDelete(index, row) {
                console.log(index, row);
                this.delete(row.departmentId);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getAllUser(1, val);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getAllUser(val, this.pageSize);
            },

            addDepartment() {
                if (this.form.departmentName == "") {
                    return false;
                }
                addDepartment(this.form.departmentName).then(resp => {
                    console.log(resp)
                    if (resp.code == 0) {
                        this.$message.success("添加成功！");
                        this.form.departmentName = "";
                        this.dialogFormVisible = false;
                        getAllDepartment().then(resp => {
                            this.department = resp.data;
                        })
                    } else {
                        this.$message.error("添加失败!");
                    }
                })
            },
            delete(id) {
                this.$confirm('此操作将解散该部门, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    deleteDepartment(id).then(resp => {
                        if (resp.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            getAllDepartment().then(resp => {
                                this.department = resp.data;
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            chart_1() {
                let myChart = echarts.init(this.$refs.dept_chart_1);
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '部门分析   ',
                        subtext: '',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['部门1', '部门2']
                    },
                    series: [
                        {
                            name: '部门分析',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 10, name: '部门1'},
                                {value: 5, name: '部门2'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    }
</script>

<style scoped lang="scss">
    .zhedie {
        padding: 0 25px;
    }
</style>